<template>
    <div>
        <div class="row" style="background: #3e4145">
            <div class="col-xs-12">
                <div class="alert alert-block alert-success">
                    <button type="button" class="close" data-dismiss="alert">
                        <i class="ace-icon fa fa-times"></i>
                    </button>
                    <i class="ace-icon fa fa-check green"></i>
                    图表分析
                    <strong class="green">
                        Hermit
                        <small>(v0.0.1)</small>
                    </strong>
                    学生信息看板
                </div>

                <div class="row">
                    <div class="space-6"></div>
                    <div class="col-sm-4 infobox-container">
                        <!-- 图表一 -->
                        <div id="chart1" style="width: 100%; height:300%"></div>
                    </div>

                    <div class="col-sm-4 infobox-container">
                        <!-- 图表二 -->
                        <div id="chart2" style="width: 100%; height:300%"></div>
                    </div>

                    <div class="col-sm-4 infobox-container">
                        <!-- 图表三 -->
                        <div id="chart3" style="width: 100%; height:300%"></div>
                    </div>
                </div><!-- /.row -->

                <div class="hr hr32 hr-dotted"></div>

                <div class="row">
                    <div class="col-sm-12 infobox-container">
                        <!-- 图表四 -->
                        <div id="chart4" style="width: 100%; height:500%"></div>
                    </div>
                </div><!-- /.row -->
                <div class="row">
                    <div class="col-sm-12 infobox-container">
                        <!-- 图表五 -->
                        <div id="chart5" style="width: 100%; height:700%"></div>
                    </div>
                </div><!-- /.row -->
                <div class="row">
                    <div class="col-sm-12 infobox-container">
                        <!-- 图表六 -->
                        <div id="chart6" style="width: 100%; height:1600%"></div>
                    </div>
                </div><!-- /.row -->

                <div class="hr hr32 hr-dotted"></div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div>
</template>

<script>
  import * as echarts from 'echarts';
  import userStudentApi from "../../api/work/userStudent";
  import {apiDefaultErrorHandler} from "../../api/base";

  export default {
    name: 'studentChart',
    data() {
      return {
        userStudents: [], // 所有学生信息
        chart1Data: [],
        chart2Data: [],
        chart3Data: [],
        chart4Legend: [],
        chart5Legend: [],
        chart6Legend: [],
        chart4Data: [],
        chart5Data: [],
        chart6Data: []
      };
    },
    mounted: function () {
      this.$parent.activeSidebar("welcome-sidebar");
      this.list()
    },
    methods: {
      startChart1() {
        var myChart = echarts.init(document.getElementById('chart1'), 'dark');
        myChart.setOption({
          backgroundColor: '#3e4145',
          title: {
            text: '学生性别比例',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: this.chart1Data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      },
      startChart2() {
        var myChart = echarts.init(document.getElementById('chart2'), 'dark');

        myChart.setOption({
          backgroundColor: '#3e4145',
          title: {
            text: '学生年龄比例',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['0-10岁', '10-20岁', '21岁', '22岁', '23岁', '24岁', '25岁', '26岁', '27岁', '28岁', '29岁', '30岁', '30岁+'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '年龄段人数',
              type: 'bar',
              barWidth: '60%',
              data: this.chart2Data
            }
          ]
        });
      },
      startChart3() {
        var myChart = echarts.init(document.getElementById('chart3'), 'dark');

        myChart.setOption({
          backgroundColor: '#3e4145',

          title: {
            text: '年级人数比例',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },

          tooltip: {
            trigger: 'item'
          },

          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '当前年级',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: this.chart3Data.sort(function (a, b) {
                return a.value - b.value;
              }),
              roseType: 'radius',
              label: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#ffe600',
                shadowBlur: 10,
                shadowColor: '#ffe600'
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function () {
                return Math.random() * 200;
              }
            }
          ]
        });
      },
      startChart4() {
        var myChart = echarts.init(document.getElementById('chart4'), 'dark');

        myChart.setOption({
          backgroundColor: '#3e4145',

          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}人"
          },
          legend: {
            data: this.chart4Legend
          },

          series: [
            {
              name: '学院',
              type: 'funnel',
              left: '10%',
              top: 60,
              //x2: 80,
              bottom: 60,
              width: '80%',
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#121a2a',
                borderWidth: 1
              },
              emphasis: {
                label: {
                  fontSize: 80,
                  color: '#121a2a',
                }
              },
              data: this.chart4Data
            }
          ]
        });
      },
      startChart5() {
        var myChart = echarts.init(document.getElementById('chart5'), 'dark');

        myChart.setOption({
          backgroundColor: '#3e4145',

          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}人"
          },
          legend: {
            data: this.chart5Legend
          },
          series: [
            {
              name: '专业',
              type: 'funnel',
              left: '10%',
              top: 60,
              //x2: 80,
              bottom: 60,
              width: '80%',
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside',
                color: '#fff'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
              },
              emphasis: {
                label: {
                  fontSize: 80,
                  color: '#121a2a',
                }
              },
              data: this.chart5Data
            }
          ]
        });
      },
      startChart6() {
        var myChart = echarts.init(document.getElementById('chart6'), 'dark');

        myChart.setOption({
          backgroundColor: '#3e4145',

          title: {
            text: '',
            subtext: ''
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}人"
          },
          legend: {
            data: this.chart6Legend
          },
          series: [
            {
              name: '班级',
              type: 'funnel',
              left: '10%',
              top: 60,
              //x2: 80,
              bottom: 60,
              width: '80%',
              // height: {totalHeight} - y - y2,
              min: 0,
              max: 100,
              minSize: '0%',
              maxSize: '100%',
              sort: 'descending',
              gap: 2,
              label: {
                show: true,
                position: 'inside'
              },
              labelLine: {
                length: 10,
                lineStyle: {
                  width: 1,
                  type: 'solid'
                }
              },
              itemStyle: {
                borderColor: '#fff',
              },
              emphasis: {
                label: {
                  fontSize: 80,
                  color: '#121a2a',
                }
              },
              data: this.chart6Data
            }
          ]
        });
      },
      /**查询学生表所有数据*/
      list() {
        let _this = this;
        Loading.show();
        userStudentApi.queryAll().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            _this.userStudents = data.list
            this.initChart1Data()
            this.initChart2Data()
            this.initChart3Data()
            this.initChart456Data()
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        });
        Loading.hide();
      },
      // 绘制年龄图表
      initChart1Data() {
        let boyNum = 0
        let girlNum = 0
        for (let i = 0; i < this.userStudents.length; i++) {
          if (this.userStudents[i].sex === 1) {
            boyNum = boyNum + 1
          } else if (this.userStudents[i].sex === 0) {
            girlNum = girlNum + 1
          }
        }
        // 绘制表一
        this.chart1Data.push({
          value: boyNum,
          name: '男'
        })
        this.chart1Data.push({
          value: girlNum,
          name: '女'
        })
        this.startChart1()
      },
      // 绘制年龄图表
      initChart2Data() {
        let ageNum = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        for (let i = 0; i < this.userStudents.length; i++) {
          if (this.userStudents[i].age > 0 && this.userStudents[i].age < 10) {
            ageNum[0]++;
          } else if (this.userStudents[i].age >= 10 && this.userStudents[i].age < 20) {
            ageNum[1]++;
          } else if (this.userStudents[i].age === 21) {
            ageNum[2]++;
          } else if (this.userStudents[i].age === 22) {
            ageNum[3]++;
          } else if (this.userStudents[i].age === 23) {
            ageNum[4]++;
          } else if (this.userStudents[i].age === 24) {
            ageNum[5]++;
          } else if (this.userStudents[i].age === 25) {
            ageNum[6]++;
          } else if (this.userStudents[i].age === 26) {
            ageNum[7]++;
          } else if (this.userStudents[i].age === 27) {
            ageNum[8]++;
          } else if (this.userStudents[i].age === 28) {
            ageNum[9]++;
          } else if (this.userStudents[i].age === 29) {
            ageNum[10]++;
          } else if (this.userStudents[i].age === 30) {
            ageNum[11]++;
          } else if (this.userStudents[i].age > 30) {
            ageNum[12]++;
          }
        }
        // 绘制表一
        this.chart2Data = ageNum
        this.startChart2()
      },
      // 绘制年级图表 年级状态取值来源 1 大一 2 大二 3 大三 4 大四 5 研一 6 研二 7 研三 8 博一 9 博二 10 博三
      initChart3Data() {
        let gradeNum = [
          {value: 0, name: '大一'},
          {value: 0, name: '大二'},
          {value: 0, name: '大三'},
          {value: 0, name: '大四'},
          {value: 0, name: '研一'},
          {value: 0, name: '研二'},
          {value: 0, name: '研三'},
          {value: 0, name: '博一'},
          {value: 0, name: '博二'},
          {value: 0, name: '博三'}
        ]
        for (let i = 0; i < this.userStudents.length; i++) {
          for (let j = 0; j < 11; j++) {
            if (this.userStudents[i].gradeStatus === j) {
              gradeNum[j - 1].value++;
            }
          }
        }
        // 绘制表一
        this.chart3Data = gradeNum
        this.startChart3()
      },
      // 绘制学院/专业/班级人数表
      initChart456Data() {
        for (let i = 0; i < this.userStudents.length; i++) {
          if (this.chart4Legend.indexOf(this.userStudents[i].collegeName) === -1) {
            this.chart4Legend.push(this.userStudents[i].collegeName)
            this.chart4Data.push({
              value: 0,
              name: this.userStudents[i].collegeName
            })
          }
          if (this.chart5Legend.indexOf(this.userStudents[i].majorName) === -1) {
            this.chart5Legend.push(this.userStudents[i].majorName)
            this.chart5Data.push({
              value: 0,
              name: this.userStudents[i].majorName
            })
          }
          if (this.chart6Legend.indexOf(this.userStudents[i].classesName) === -1) {
            this.chart6Legend.push(this.userStudents[i].classesName)
            this.chart6Data.push({
              value: 0,
              name: this.userStudents[i].classesName
            })
          }
        }
        for (let i = 0; i < this.userStudents.length; i++) {
          for (let o = 0; o < this.chart4Data.length; o++) {
            if (this.chart4Data[o].name === this.userStudents[i].collegeName) {
              this.chart4Data[o].value ++;
            }
          }
          for (let p = 0; p < this.chart5Data.length; p++) {
            if (this.chart5Data[p].name === this.userStudents[i].majorName) {
              this.chart5Data[p].value ++;
            }
          }
          for (let q = 0; q < this.chart6Data.length; q++) {
            if (this.chart6Data[q].name === this.userStudents[i].classesName) {
              this.chart6Data[q].value ++;
            }
          }
        }
        // 绘制表一
        this.startChart4()
        this.startChart5()
        this.startChart6()
      }
    }
  }
</script>
